<template>
    <div class="components-container" style='height:100vh'>
        <div class='chart-container'>
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5><span class="title">系统层面故障演练</span></h5>
                </div>
            </section>
            <section class="chartMain">
              <div v-for="(project,index) in arrs" :key="index">
                <el-collapse accordion value="expand" >
                <el-collapse-item name="expand">
                  <template slot="title">
                    <span class="projecttitle">{{project.name}}<i class="header-icon el-icon-info"></i></span>
                  </template>
                  <div class="projectbody">
                    <div class="item" v-for="(item,index) in project.modules" :key="index">
                      <div class="itemtitle">{{item.name}}
                        <el-switch
                          v-model="item.status"
                          @change="changeStatus(item,project.name)">
                        </el-switch>
                      </div>
                      <div class="dataTable">
                        <template>
                        <el-table
                          :data="item.infos"
                          style="width: 100%">
                         
                          <el-table-column
                            prop="machines"
                            label="目标机器"
                            align="center"
                            
                            >
                          </el-table-column>
                          <el-table-column
                            prop="script"
                            label="执行策略脚本"
                            align="center"
                           

                            >
                          </el-table-column>
                        </el-table>
                      </template>
                      </div>                                 
                    </div>                
                  </div> 
                </el-collapse-item>
                </el-collapse>               
              </div>
            </section>           
        </div>
      </div>
</template>

<script>
import { getAll, updateStatus, updateProjectStatus } from '@/api/faultdrillshellData'

export default {
  data() {
    return {
      arrs: []
    }
  },
  mounted() {
    this.index()
  },
  destroyed() {
  },
  methods: {
    index() {
      getAll().then(response => {
        this.arrs = response.data
      })
    },
    changeStatus(item, projectName) {
      var listQuery = { id: item.id, status: item.status, projectName: projectName }
      updateStatus(listQuery).then(response => {
        console.log(response.data)
      })
    },
    changeProjectStatus(item) {
      var listQuery = { id: item.id, status: item.status }
      updateProjectStatus(listQuery).then(response => {
        console.log(response.data)
      })
    }
  }
}
</script>
<style  lang="scss" >
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 30px;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 2;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
            .title{padding: 0 10px;}
        }
    }
}
.dataTable{
  padding-top: 10px;
  border-bottom: 1px solid #eee;
}
.el-switch.is-checked .el-switch__core {
  border-color: #32CD32;
  background-color: #32CD32;
}
.projecttitle{
  font-size: 15px;
  color: black;
  font-weight: bold;
}
.itemtitle{
  font-weight: bold;
  padding-top: 10px;
}
.el-table .cell {
  white-space: pre-line;
}
thead .cell{
  text-align: center;
}
tbody .cell{
  margin: 10px;
}
.item{
  margin: 10px;
}
.projectbody{
  margin-top: 10px;
} 
</style> 